<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" href="../css/public-head.css" />
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/SetMeal.css" />
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper" id="swiper-box">
				<!--经典套餐-->
				<!--<div id="Meal_1" vip_id="1" data-hash="slide2" class="swiper-slide openVip">
					<div class="k">
						<div class="slide-item">
							<img src="../image/icon/tc-1@2x.png" />
							<div class="setmeal">
								<span class="s1-1">VIP</span><br />
								<span class="s2">经典套餐</span><br />
								<span class="s3">399</span><span class="s4">元/年</span>
							</div>
						</div>
						<div class="explain">
							<div class="explain-1">
								<div><img src="../image/icon/tc-tb1@2x.png" /><br/><span class="language-1">一年VIP资格</span><span class="language-2">纵享全网VIP套餐</span></div>
								<div><img src="../image/icon/tc-tb2@2x.png" /><br/><span class="language-1">10张洗车券</span><span class="language-2">纵享全网VIP套餐</span></div>
								<div><img src="../image/icon/tc-tb3@2x.png" /><br/><span class="language-1">200元代金券</span><span class="language-2">线上消费使用</span></div>
							</div>
							<div class="explain-2">
								<div><img src="../image/icon/tc-tb4@2x.png" /><br/><span class="language-1">加油充值97折券</span><span class="language-2">优惠限额1000/月</span></div>
								<div><img src="../image/icon/tc-tb5@2x.png" /><br/><span class="language-1">200元保险抵用券</span><span class="language-2">优惠折上折</span></div>
								<div></div>
							</div>
						</div>
						<div class="bar">
							<div class="agreement">购买车车侠VIP年卡即表示同意
								<a>
									<<车车侠服务协议>></a>
							</div>
							<div class="purchase ">购买套餐</div>
						</div>
					</div>
					<div class="navList">
						<div style="background-color: #FF5500;"></div>
						<div></div>
						<div></div>
					</div>
				</div>-->

				<!--黄金套餐-->
				<!--<div id="Meal" vip_id="2" data-hash="slide1" class="swiper-slide openVip">
					<div class="k">
						<div class="slide-item">
							<img src="../image/icon/tc-2@2x.png" />
							<div class="setmeal">
								<span class="s1-1" style="color: #EC6D14;">VIP</span><br />
								<span class="s2">黄金套餐</span><br/>
								<span class="s3">799</span><span class="s4">元/年</span>
							</div>
						</div>
						<div class="explain">
							<div class="explain-1">
								<div><img src="../image/icon/tc-tb1@2x.png" /><br/><span class="language-1">一年VIP资格</span><span class="language-2">纵享全网VIP套餐</span></div>
								<div><img src="../image/icon/tc-tb2@2x.png" /><br/><span class="language-1">10张洗车券</span><span class="language-2">纵享全网VIP套餐</span></div>
								<div><img src="../image/icon/tc-tb3@2x.png" /><br/><span class="language-1">200元代金券</span><span class="language-2">线上消费使用</span></div>
							</div>
							<div class="explain-2">
								<div><img src="../image/icon/tc-tb4@2x.png" /><br/><span class="language-1">加油充值97折券</span><span class="language-2">优惠限额1000/月</span></div>
								<div><img src="../image/icon/tc-tb5@2x.png" /><br/><span class="language-1">200元保险抵用券</span><span class="language-2">优惠折上折</span></div>
								<div></div>
							</div>
						</div>
						<div class="bar">
							<div class="agreement">购买车车侠VIP年卡即表示同意
								<a>
									<<车车侠服务协议>></a>
							</div>
							<div class="purchase ">购买套餐</div>
						</div>
					</div>
					<div class="navList">
						<div></div>
						<div style="background-color: #FF5500;"></div>
						<div></div>
					</div>
				</div>-->

				<!--钻石套餐-->
				<!-- <div id="Meal" vip_id="3" data-hash="slide3"  class="swiper-slide">
					<div class="k">
						<div class="slide-item">
							<img src="../image/icon/tc-3@2x.png" />
							<div class="setmeal">
								<span class="s1-1" style="color: #F65656;">VIP</span><br />
								<span class="s2">钻石套餐</span><br />
								<span class="s3">1588</span><span class="s4">元/年</span>
							</div>
						</div>
						<div class="explain">
							<div class="explain-1">
								<div><img src="../image/icon/tc-tb1@2x.png" /><br/><span class="language-1">一年VIP资格</span><span class="language-2">纵享全网VIP套餐</span></div>
								<div><img src="../image/icon/tc-tb2@2x.png" /><br/><span class="language-1">10张洗车券</span><span class="language-2">纵享全网VIP套餐</span></div>
								<div><img src="../image/icon/tc-tb3@2x.png" /><br/><span class="language-1">200元代金券</span><span class="language-2">线上消费使用</span></div>
							</div>
							<div class="explain-2">
								<div><img src="../image/icon/tc-tb4@2x.png" /><br/><span class="language-1">加油充值97折券</span><span class="language-2">优惠限额1000/月</span></div>
								<div><img src="../image/icon/tc-tb5@2x.png" /><br/><span class="language-1">200元保险抵用券</span><span class="language-2">优惠折上折</span></div>
								<div></div>
							</div>
						</div>
						<div class="bar">
							<div class="agreement">购买车车侠VIP年卡即表示同意
								<a>
									<<车车侠服务协议>></a>
							</div>
							<div class="purchase " onclick="return openVip(3)">购买套餐</div>
						</div>
					</div>
					<div class="navList">
						<div></div>
						<div></div>
						<div style="background-color: #FF5500;"></div>
					</div>
				</div> -->

			</div>
		</div>
	</body>
	<script type="text/html" id="swiper-box_content">
		{{each data as val i}}

		<div data-hash="slide{{i}}" class="swiper-slide openVip" id="{{val.id}}">
			<div class="k">
				<div class="vip_img">
					<img src="{{val.icon_url}}" />
				</div>
				<div class="bar">
					<div class="agreement">购买车车侠VIP年卡即表示同意
						<a>
							<<车车侠服务协议>></a>
					</div>
					<div class="purchase " onclick="Buyvip({{val.id}})">购买套餐</div>
				</div>
			</div>
			<div class="navList">
				{{if i==0}}
				<div style="background-color: #FF5500;"></div>
				<div></div>
				<div></div>
				{{else if i==1}}
				<div></div>
				<div style="background-color: #FF5500;"></div>
				<div></div>
				{{else}}
				<div></div>
				<div></div>
				<div style="background-color: #FF5500;"></div>
				{{/if}}
			</div>
		</div>
		{{/each}}
	</script>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/public-head.js"></script>
	<script type="text/javascript" src="../script/swiper.min.js"></script>
	<script type="text/javascript" src="../script/mui.min.js"></script>
	<script src="../script/template-web.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		headInner({
			title: "VIP年卡",
			//headleft
			headl: '<a  style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
			//headright
			headr: '<a style="color:white"></a>',
			color: "", //默认是蓝色
			padding: "0px 0px 0px",
		})
		apiready = function() {
			//获取vip列表
			vipList();
			// mySwiper()

		};

		//获取vip列表
		function vipList() {
			BASE.MYajax({
				'pathName': 'vip/index', //请求路径
				'methods': 'get',
				'method': vipBackData //调用函数
			});
		}
		function vipBackData(ret, err) {
			if(ret.code == 200) {
				console.log(JSON.stringify(ret));
				var html = template("swiper-box_content", ret);
				$api.byId('swiper-box').innerHTML = html;
				mySwiper()

			} else {
				reToast(ret, err)
			}
		}

		//开头vip接口
		function Buyvip(id) {
			BASE.MYajax({
				'pathName': 'vip/open',
				'methods': 'POST',
				'ajaxData': {
					values: {
						vip_id: id
					}
				},
				'method': openResultProcess
			});
		}

		function openResultProcess(res, err) {
			console.log(JSON.stringify(res));
			return api.openWin({
				name: 'online-payment_2',
				url: '../html/online-payment_2.html',
				pageParam: {
					// 单号,下单时间,单号ID,支付金额,到店下单或者钥匙柜下单
					order_num: res.data.orders_sn,
					created_order: res.data.created_at,
					OrderId: res.data.orders_id,
					Service_price: res.data.order_amount,
					project: '开通VIP',
				}
			})
		}
		//轮播
		function mySwiper() {
			var mySwiper = new Swiper('.swiper-container', {
				autoplay: true, //自动滑动
				pagination: '.swiper-pagination',
			})
		}
		//跳转返回页面

		function RechargePayment() {
			api.openWin({
				name: 'RechargePayment',
				url: '../html/RechargePayment.html'
			});

		}
	</script>

</html>
